import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Button, Modal, Input } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import SelectForm from '@/components/SelectForm';
import RightDraw from '@/components/RightDraw';
import AdButton from '@/components/AdButton';
import ManageList from '@/components/ManageList';
import prompt from '@/components/Prompt';
import AntdFormItem from '@/components/AntdFormItem';
import TableButtons from '@/components/TableButtons';
import StandardTable from '@/components/StandardTable';
import FileImport from '@/components/FileImport';
import { queryDict, formateDateToMin } from '@/utils/common';
import AdSearch from '@/components/AdSearch';
import AdSelect from '@/components/AdSelect';
import AntdDatePicker from '@/components/AntdDatePicker';
import { allDictList } from '@/utils/constans';
import {
  selectICCardList,
  saveAllValues,
  codes,
  allDispatchType,
  routeUrl,
  selectDetail,
  renderTableAdSelect,
  IcCardStatus,
  ICtype,
} from './utils';
import ICCardDetail from './ICCardDetail';
import styles from './ICCardList.less';

const { confirm } = Modal;

@ManageList
@connect(({ iccard, loading, component }) => ({
  icCardList: iccard.icCardList,
  icCardDetail: iccard.icCardDetail,
  formValues: iccard.formValues,
  dictObject: component.dictObject,
  searchValue: component.searchValue,
  loading: loading.effects[allDispatchType.list],
}))
@Form.create()
export default class ICCardList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expandForm: false,
      visible: false,
      detailId: '',
    };
    this.className = 'iccard-table';
  }
  componentWillMount() {
    // 查询字典项
    const allDict = [allDictList.manifest_transport, allDictList.declareListType];
    queryDict({ props: this.props, allDict });
  }
  componentDidMount() {
    selectICCardList({ props: this.props });
    console.log('ICtype---',ICtype)
  }

  //右侧弹窗详情页---修改
  selectDetail = () => {
    const { detailId } = this.state;
    selectDetail({
      type: allDispatchType.detail,
      payload: { id: detailId },
      props: this.props,
    });
  };

  /**
   * form 查找条件 重置
   */
  handleFormReset = () => {
    const { form } = this.props;
    const props = { props: this.props };
    form.resetFields();
    saveAllValues({ payload: { formValues: {} }, ...props });
    selectICCardList({ ...props });
  };

  /**
   * form 查找条件 查询
   */
  handleSearch = formValues => {
    if (!formValues) return;
    const { unloadTime, ...value } = formValues;
    const params = { props: this.props, payload: value };
    saveAllValues({ payload: { formValues: value }, props: this.props });
    selectICCardList(params);
  };

  /**
   * table 表格 分页操作
   */
  handleStandardTableChange = param => {
    const { formValues } = this.props;
    selectICCardList({ payload: { ...formValues, ...param }, props: this.props });
  };

  //详情
  showDetail = (e, detailId) => {
    e.stopPropagation();
    this.handleStateChange([{ detailId }, { visible: true }]);
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  //新建
  handleAdd = () => {
    router.push(routeUrl.add);
  };

  //编辑
  handleEdit = () => {
    const { detailId } = this.state;
    this.handleStateChange([{ visible: false }]);
    router.push(`${routeUrl.edit}/${detailId}`);
  };

  columns = [
    {
      title: 'IC卡名称',
      dataIndex: 'name',
      render: (text, record) => (
        <AdButton
          mode="a"
          onClick={e => this.showDetail(e, record.id)}
          text={text}
          code={codes.showDetail}
        />
      ),
      fixed: this.props.isMobile ? false : true,
    },
    {
      title: '默认',
      dataIndex: 'beDefault',
      render: text => <span>{text ? '是' : '否'}</span>,
      // render: text => renderTableAdSelect({ props: this.props, value: text, data: IcCardStatus }),
      width: 100,
    },
    {
      title: '类型',
      dataIndex: 'type',
      // ICtype  declareListType
      render: text => 
      renderTableAdSelect({ props: this.props, value: text, key:allDictList.declareListType,  declare: false,}),
      
      
    },
    {
      title: '别名',
      dataIndex: 'alias',
      // render: text => renderTableAdSelect({ props: thiss.props, value: text, data: IcCardStatus }),
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      width: 100,
    },
    {
      title: 'IC卡cookie信息',
      dataIndex: 'cookie',
      render: text => <span title={text}>{text}</span>,
    },
    {
      title: '进出境口岸海关',
      dataIndex: 'customsCode',
      render: text =>
        renderTableAdSelect({ props: this.props, value: text, key: allDictList.manifest_goods }),
    },
    {
      title: '运输工具代理企业代码',
      dataIndex: 'enterpriceCode',
      render: text => <span title={text}>{text}</span>,
      width: 250,
    },
    {
      title: '卸货地代码',
      dataIndex: 'unloadCode',
    },
    {
      title: '传输企业备案关区',
      dataIndex: 'filingAreaCode',
    },
    {
      title: '海关货物通关',
      dataIndex: 'goodsItemCode',
      render: text =>
        renderTableAdSelect({ props: this.props, value: text, key: allDictList.manifest_goods }),
    },
    {
      title: '舱单传输人名称',
      dataIndex: 'transprotName',
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      render: text => (
        <AdSearch
          label="loginName"
          name="sysName"
          value={this.props.searchValue[text]}
          onlyRead={true}
        />
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: text => <span>{text ? moment(text).format(formateDateToMin) : ''}</span>,
    },
    {
      title: '更新人',
      dataIndex: 'updateBy',
      render: text => (
        <AdSearch
          label="loginName"
          name="sysName"
          value={this.props.searchValue[text]}
          onlyRead={true}
        />
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      render: text => <span>{text ? moment(text).format(formateDateToMin) : ''}</span>,
    },
  ];

  render() {
    const { icCardList, loading, form, isMobile, dictObject } = this.props;
    const { expandForm, detailId, visible } = this.state;

    const commonParams = {
      getFieldDecorator: form.getFieldDecorator,
    };
    const firstFormItem = (
      <AntdFormItem label="IC卡名称" code="name" {...commonParams}>
        <Input />
      </AntdFormItem>
    );
    const secondFormItem = (
      <AntdFormItem label="是否默认" code="beDefault" {...commonParams}>
        <AdSelect isExist={true} data={IcCardStatus} />
      </AntdFormItem>
    );
    // secondForm 参数
    const otherFormItem = [
      [
        <AntdFormItem label="进出境口岸海关" code="customsCode" {...commonParams}>
          <Input />
        </AntdFormItem>,
      ],
      [
        <AntdFormItem label="卸货地代码" code="unloadCode" {...commonParams}>
          <Input />
        </AntdFormItem>,
        <AntdFormItem label="运输工具代理企业" code="enterpriceCode" {...commonParams}>
          <Input />
        </AntdFormItem>,
        'operatorButtons',
      ],
    ];
    const selectFormParams = {
      firstFormItem,
      secondFormItem,
      otherFormItem,
      form,
      className: this.className,
      handleFormReset: this.handleFormReset,
      handleSearch: this.handleSearch,
      toggleForm: expandForm => {
        this.handleStateChange([{ expandForm }]);
      },
      code: codes.select,
    };

    const tableButtonsParams = {
      handleAdd: this.handleAdd,
      code: codes.add,
    };

    // 详情 参数
    const rightDrawParams = {
      isMobile,
      visible,
      title: 'IC卡详情',
      code: codes.showDetail,
      mode: 'rightDraw',
      closeDetail: this.handleStateChange.bind(this, [{ visible: false }]),
      buttons: (
        <Button.Group>
          <AdButton type="primary" onClick={() => this.handleEdit()} text="编辑" />
        </Button.Group>
      ),
    };

    return (
      <Fragment>
        <SelectForm {...selectFormParams} className={styles.iccardWarp} />
        <TableButtons {...tableButtonsParams} />
        <StandardTable
          loading={loading}
          data={icCardList}
          // selectedRows={selectedRows}
          // onSelectRow={selectedRows => {
          //   this.handleStateChange([{ selectedRows }]);
          // }}
          columns={this.columns}
          onPaginationChange={this.handleStandardTableChange}
          expandForm={expandForm}
          className={this.className}
          code={codes.page}
          disabledRowSelected={true}
        />
        <RightDraw {...rightDrawParams}>
          <ICCardDetail detailId={detailId} pageType="rightDraw" />
        </RightDraw>
      </Fragment>
    );
  }
}
